.px2rem(@name, @px){
	@{name}: @px / 75 *1rem;
}
.font-dpr(@font-size){
    font-size: @font-size;
    [data-dpr="2"] & {
        font-size: @font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: @font-size * 3;
    }
}
body{
	background-color: #f9f9f9;
}

	header{
		background-color: #fff;
		z-index: 1000;
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		.px2rem(height,90);	
		border-bottom: 1px solid #ccc;
		box-shadow: 0 0px 15px #ccc;	
		p{
			.px2rem(line-height,90);
			.px2rem(font-size,31);
			text-align: center;
			padding: 0 3%;
		}
		.iconfont{
			float: right;
			.px2rem(font-size,31);
		}
	}
	.nav{
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.px2rem(margin-top,90);
		.px2rem(height,190);
		border-bottom: 1px solid #ccc;
		.find{
			.swiper-wrapper{
				.imgbtn{
					padding-left:  3%;
					width: 30%;
					display: flex;
					align-items: center;
					img{
						width: 100%;
					}
				}
			}
		}
	}
	.personage{
		border-top: 1px solid #ccc;
		background-color: #fff;
		margin-top: 3%;
		.top{
			padding: 0 3%;
			.px2rem(height,82);
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			
			span{
				display: inline-block;
				width: 40%;
				.px2rem(font-size,30);
				&.iconfont{
					.px2rem(font-size,23);
					text-align: right;
					color: #757575;
				}
			}
			._personage{
				padding-left: 4%;
				background-image: url(../images/fengexian.png
					);
				background-repeat: no-repeat;
				background-position: left;
			}
		}
		.main-content{
			.px2rem(margin-bottom,98);
			
			.box{
				border-bottom: 1px solid #ccc;
				dl{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding:4%;
					dt{
						width: 24%;
						img{
							width: 100%;
						}
					}	
					dd{
						width: 74%;
						height: 100%;
						padding-left: 2%;
						.up{
							padding-bottom: 5%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							span{
								display: inline-block;
								
							}
							._name{
								.px2rem(font-size,30);
							}
							.dingyue{
								text-align: center;
								
								border: 1px solid #000;
								border-radius: 3px;
								.px2rem(width,98);
								.px2rem(height,44);
								.px2rem(line-height,44);
							
								color: #a3a3a3;

							}
						}
						.down{
							.px2rem(font-size,25);
							color: #a3a3a3;
							.px2rem(line-height,50);
						}
					}
				}
				
			}
		}
	}

	.footer-j{
		z-index: 999;
		background-color: #fff;
		.px2rem(height,98);
		border-top: 1px solid #ccc;
		box-shadow: 0 0px 15px #ccc;
		position: fixed;
		bottom:0;
		left:0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.foot{
			a{
				text-decoration: none;
			}
			width: 20%;
			text-align: center;
			.iconfont{
				.px2rem(font-size,60);
				position: relative;
				top: 0;
				left:0;
			}
			.active{
				position: absolute;					
			}
			.hide{
				display: none;			
			}
			.homepage{
				top: 17%;
				left:6%;
			}
			.discover{
				top: 17%;
				left:27%;
			}
			.add{
				top: 17%;
				left:46.5%;
			}
			.warn{
				top: 17%;
				left:66.5%;
			}
			.user{
				top: 17%;
				left:86%;
			}
		}
	}
